<template>
  <div>
    <a-modal :width="600" :visible="obModal.visible" :title="obModal.title" @ok="handleOk" @cancel="handleCancel">
      <div>
        <a-col :span="6">
          <div>姓名:<span>{{ obModal.customerName }}</span></div>
        </a-col>
        <a-col :span="8">
          <div>卡号:
            <span>{{ obModal.cardNo }}</span>
          </div>
        </a-col>
        <a-col :span="8">
          <div>联系方式:<span>{{ obModal.phone }}</span>
          </div>
        </a-col>
      </div>
      <a-row :gutter="12">
        <a-form :form="form"  >
          <a-row :gutter="24">
            <a-col>
              <a-form-item label="开单人">
                <div style="width: 260px">
                  <a-cascader
                    :options="treeData"
                    placeholder="请选择开单人"
                    @change="onChange"
                    v-decorator="['billerList', { rules: [{ required: true, message: '请输入！' }] }]"
                  ></a-cascader>
                </div>
              </a-form-item>
            </a-col>
            <a-col>
              <a-form-item label="客户主诉">
                <div style="width: 260px">
                  <a-cascader
                    :options="dbs"
                    placeholder="请选择客户主诉"
                    @change="onChange2"
                    v-decorator="['quoteItemList', { rules: [{ required: true, message: '请输入！' }] }]"
                  ></a-cascader>
                </div>
              </a-form-item>
            </a-col>
            <a-col>
              <a-form-item label="预存款金额">
                <div class="recharge-box">
                  <span>￥</span>
                  <a-input-number
                    :formatter="
                      (value) => {
                        if(value > 10000){
                          return 10000
                        }else{
                          let reg = /^(-)*(\d+)\.(\d\d).*$/
                          return `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, '').replace(reg, '$1$2.$3')
                        }
                        
                      }
                    "
                    :parser="
                      (value) => {
                        if(value > 10000){
                          return 10000
                        }else{
                          let reg = /^(-)*(\d+)\.(\d\d).*$/
                          return value.replace(/\s?|(,*)/g, '').replace(reg, '$1$2.$3')
                        }
                        
                      }
                    "
                    prefix="￥"
                    suffix="RMB"
                    type="number"
                    allowClear
                    :min="1"
                     style="width: 260px;padding-left:20px;padding-right: 45px;"
                    :max="10000"
                    placeholder="请输入预存款金额"
                    v-decorator="[
                      'payableAmt',
                      { 
                        rules: [
                          { required: true, validator: (rule, value, callback)=>{
                            if(value === ''){
                              callback('请输入1-10000充值金额') 
                            }else if(Number(value) <= 0){
                              callback('请输入1-10000充值金额') 
                            }else if(value > 10000){
                              callback('请输入1-10000充值金额')  
                            }else{
                              callback()
                            }
                          }},
                          
                        ],
                      },
                    ]"
                     
                  ></a-input-number>
                    <b>RMB</b>
                </div>
              </a-form-item>
            </a-col>
            <a-col>
              <a-form-item label="备注">
                <a-input
                  allowClear
                  placeholder="请输入备注信息"
                  :max-length="55"
                  :min-length="10"
                  v-decorator="['remarks']"
                ></a-input>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-row>
    </a-modal>
  </div>
</template>
<script>
import { recharge, getcreator, getdb } from '@/api/customer/customer'
export default {
  props: {
    obModal: {},
  },
  data() {
    return {
      options: [],
      treeData: [], //1026李浩要求改显示结构，从普通下拉变更为部门树
      list2: [], //总数据（不会改变）
      list: [], //存放前100的数据
      treePageSize: 100,
      scrollPage: 1,
      dbs: [],
      top: { ...this.obModal.db },
      form: this.$form.createForm(this, { name: 'coordinated' }),
       newSendData: {
        arr1:{},
        arr2:{}
      }
    }
  },
  mounted() {
    this.getDB()
    this.form.resetFields()
    // console.log('系统用户id',JSON.parse(localStorage.getItem('userInfoDB')).erpId)
    //默认选中的人，由于下拉单列表改成了二级联动列表，此代码已无效，应该放在表单v-decorator初始值里面
    // this.$nextTick(()=>{
    //   this.form.setFieldsValue({
    //     'billerList': JSON.parse(localStorage.getItem('userInfoDB')).erpId
    //   })
    // })
  },
  methods: {
    resD(data) {
      if (data) return
      for (let i in data) {
        if (data.children && data.children.length > 0) {
          ;(data.label = data.name), (data.value = data.erpid)
          data.children.forEach((item) => {
            return this.resD(item)
          })
        }
      }
    },
    getDB() {
      getcreator().then((res) => {
        for (var i = 0; i < res.length; i++) {
          res[i].children.forEach((item) => {
            item.value = item.erpId
            item.label = item.name
          })
          this.treeData.push({
            label: res[i].dgname,
            value: res[i].dgId,
            children: res[i].children,
          })
        }
      })
      getdb().then((res) => {
        for (var i = 0; i < res.length; i++) {
          res[i].children.forEach((item) => {
            item.value = item.tbClientDemandId
            item.label = item.name
          })
          this.dbs.push({
            label: res[i].dgname,
            value: res[i].dgId,
            children: res[i].children,
          })
        }
      })
    },
    // 滚动
    onChange(value, record) {
      this.newSendData.arr1 = record[1]
    },
    onChange2(value, record) {
      this.newSendData.arr2 = record[1]
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    check(value, row, index) {
      if (value) {
        for (var i = 0; i < value.length; i++) {
          callback('？？？？')
        }
      } else {
        callback()
      }
    },
    handleOk(e) {
      const { form: { validateFields }} = this
      validateFields((errors, values) => {
        if (errors) {
          console.log('表单检验未通过111', errors, values)
          return
        }
        const form_values = this.form.getFieldsValue()
        form_values.recorderrecorder = 'recorder'
        form_values.clientId = this.obModal.customerId
        const params={
          ...form_values,
          billerId: form_values.billerList[1],
          recorder: this.newSendData.arr1.name,
          receiveItemId: form_values.quoteItemList[1],
          receiveItemName: this.newSendData.arr2.name,
          customerId: this.obModal.customerId,
        }
        // console.log('表单通过values',values)
        console.log('表单通过params',params)
        recharge(params).then((res) => {
          console.log(res)
          if (res.code.toString() !== '200') {
            this.$message.error(res.msg || res.message)
            this.obModal.visible = false
            this.$emit('getlist')
            return
          } else {
            this.$message.success(res.message || res.msg)
            this.obModal.visible = false
            this.$emit('getlist')
                this.form.resetFields()
          }
        })
      })
    },

    handleCancel(e) {
      this.form.resetFields()
      this.obModal.visible = false
    },
  },
}
</script>
<style scoped lang="less">
  /deep/ .ant-form-item{
    margin-bottom: 0 !important;
  }
  .recharge-box{
    position: relative;
    span{
      position: absolute;
      z-index: 10;
      left: 8px;
      font-size: 17px;
      top: 0px;
    }
    b{
      position: absolute;
      z-index: 10;
      left: 220px;
      font-size: 14px;
      top: 0px;
      font-weight: normal;
    }
  }
  ::-webkit-scrollbar {  /* 滚动条整体部分 */
    width:10px;
    margin-right:2px
  }
</style>